<template>
  <div class="read_view">
    <van-nav-bar style="position: fixed; width: 100%;" title="图书详情" left-text="返回" right-text="" left-arrow
      @click-left="onClickLeft" />
    <!-- @click-right="onClickRight" -->
    <div class="book_title">
      <div class="book_bg">
        <div class="my_img">
          <img :src="this.bg" alt="">
        </div>
        <div class="book_Introduction1">
          <span class="book_title">{{ this.bookname }}</span>
          <span class="book_author">{{ this.author }}</span>
          <span class="book_type">{{ this.bookType }}</span>
        </div>
      </div>
    </div>

    <div class="book_Introlist">
      <van-tabs v-model="active" animated>
        <van-tab title="书籍介绍">
          <!-- <shujijiehsao :book-data="Jieshao" /> -->
          <shujijiehsao-view ref="shujijiehsaoView"></shujijiehsao-view>
        </van-tab>
        <van-tab title="作家主页">
          <zuojiazhuye-view :book-data="Jieshao"></zuojiazhuye-view>
        </van-tab>
        <van-tab title="作品荣誉">
          <rongyu :book-data="Jieshao" />
        </van-tab>
        <van-tab title="评论">
          <pinglun :book-data="Jieshao" />
        </van-tab>
      </van-tabs>
    </div>
    <!-- 看书按钮 -->
    <div class="toreadbook">
      <van-button @click="Addbooks(bookid, bookname)" color="#7232dd" plain>加入书架</van-button>
      <!-- <van-button color="linear-gradient(to right, #ff6034, #ee0a24)" to="/tobook">
        开始阅读
      </van-button> -->
      <van-button @click="Tobook(bookid, bookname)"  color="linear-gradient(to right, #ff6034, #ee0a24)" >
        开始阅读
      </van-button>
      <van-button color="#eea627">打赏作者</van-button>
    </div>
  </div>
</template>

<style>
.van-nav-bar__text {
  color: #000 !important;
}

.van-tab__text--ellipsis {
  font-size: 14px;
}

.van-nav-bar .van-icon {
  color: #000000;
}

.toreadbook {
  display: block;
  position: fixed;
  height: 10vh;
  width: 100vw;
  margin: 0 auto;
  bottom: 0;
}

.van-button__content {
  /* width: 20vw; */
  flex-grow: 1;
}

</style>

<style lang="less" scoped>
.read_view {
  background-color: rgb(255, 255, 255);
  height: 100vh;
  overflow: scroll;
}

.van-tabs__wrap {
  margin: 0 5vw;
}


.book_title {
  margin-top: 15px;

  .book_bg {
    width: 90%;
    margin: 0 auto;
    margin-top: 100px;
    height: 140px;
    display: inline-flex;
    background-color: #f2f2ff;

    .my_img {
      width: 140px;
      height: 175px;
      margin-bottom: 10px;
      left: 30px;
      top: -50px;
      position: relative;
      display: inline-block;
      margin-right: 10px;
      border-radius: 5px;

      img {
        object-fit: cover;
        width: 130px;
        height: 175px;
        border-radius: 5px;
      }
    }

    .book_Introduction1 {
      position: relative;
      display: inline-block;
      overflow: hidden;
      margin-left: 30px;
      width: 140px;
      height: 120px;
      margin-top: 20px;

      span {
        display: block;
        left: 0;
        text-align: left;
        margin: 6px 0;
      }

      .book_title {
        font-size: 14px;
        font-weight: bold;
      }

      .book_author {
        color: rgb(107, 107, 107);
        display: block;
        font-size: 12px;
        position: relative;
        z-index: 100;
      }

      .book_type {
        color: rgb(127, 127, 127);
        font-size: 10px;
      }
    }
  }
}
</style>
<script>
import shujijiehsaoView from './shujijiehsaoView.vue';
import zuojiazhuyeView from './zuojiazhuyeView.vue';
import rongyu from './zuopingrongyuView.vue';
import pinglun from './pinglunView.vue';
import { Dialog } from 'vant'

// 导入书籍详情接口
import { booksub } from '../api/myindex';
// 导入书籍评论接口
import { bookComment } from '../api/myindex';
// import eventBus from '../router/eventBus';

// 打开页面时
// 初始化（获取存储在本地的书籍）
let sky_books = []
let sky_books_str = localStorage.getItem("SKY_BOOKS")
if (sky_books_str) {
  sky_books = JSON.parse(sky_books_str)
}


export default {
  data() {
    return {
      active: 0,
      // 书籍介绍
      myarr: [],
      Jieshao: {
        bookid: "加载中",
        bookname: "加载中",
        // 点击次数
        clicksCount: 0,
        // 评分
        rankValue: 0,
        // 作者名称
        author: "加载中",
        // 书籍内容
        content: "加载中",
        // 字数 
        numberOfWords: "加载中",
        // 图书类型 
        bookType: "加载中",
        // 图书封面
        bg: "",
      },
      bookid: "",
      bookname: "",
      bg: "",
    };
  },
  created() {
    console.log(this.$route.query);
    this.bookid = this.$route.query.id;
    this.bookname = this.$route.query.name;
    this.bg = this.$route.query.bg;
  },
  mounted() {
    this.getmydata1();
    this.getmydata2();
  },
  methods: {
    onClickLeft() {
      // this.$router.push({ path: "/day_recommend" });
      this.$router.back();
    },
    Tobook(getid, bookname) {
      this.$router.push({
        path: "/tobook", query: {
          id: getid,
          name: bookname,
        }
      })
    },
    async getmydata1() {
      try {
        // 调用接口
        const response = await booksub({
          id: this.bookid,
          title: this.bookname
        });
        // 请求成功
        console.log("请求成功！");
        console.log("---content>", response);
        if (response) {
          console.log("myarr-->", response.feed);
          // 数据赋值
          // 书籍评分
          this.rankValue = response.feed.entry['pris:ranking'].value;
          console.log("书籍评分rankValue", this.rankValue);
          // 书籍内容
          this.content = response.feed.entry.content.text;
          console.log("书籍内容content", this.content);
          console.log("图书名称bookname", this.bookname);

          // 作者
          this.author = response.feed.entry.author.name;
          console.log("作者author", this.author);
          // 字数
          let numWords = response.feed.entry.link[9].length;
          this.numberOfWords = (numWords / 10000.0).toFixed(1);
          console.log("字数numberOfWords", this.numberOfWords);
          // 点击次数
          this.clicksCount = response.feed.entry['pris:subscribe'].clicksCount;
          console.log("点击次数clicksCount", this.clicksCount);
          // 图书类型
          this.bookType = response.feed.entry['pris:book'].keyname;
          console.log("图书类型bookType", this.bookType);

          // 传输数据
          console.log("传递数据，书籍介绍");
          this.$refs.shujijiehsaoView.getmydata(
            this.bookid,
            this.bookname,
            this.clicksCount,
            this.rankValue,
            this.author,
            this.content,
            this.numberOfWords,
            this.bookType,
            this.bg
          );
        }
      } catch (err) {
        // 请求失败
        console.log("请求失败,请刷新", err);
      }
    },
    async getmydata2() {
      try {
        // 调用接口
        const response = await bookComment({
          type: 3,
          id: this.bookid,
          page: 1,
        });
        // 请求成功
        console.log("请求成功！");
        if (response) {
          console.log("---content>", response);
        }
      } catch (err) {
        // 请求失败
        console.log("请求失败,请刷新", err);
      }
    },
    // 加入书架业务
    Addbooks(bookid, bookname) {
      let obj = {};
      obj.id = bookid;
      obj.bookname = bookname;
      obj.bookbg = this.bg;
      obj.bookauthor = this.author;
      let arr3 = sky_books.filter(item => item.id == bookid);
      if(arr3<1){
      sky_books.push(obj);
      let str = JSON.stringify(sky_books);
      localStorage.setItem('SKY_BOOKS', str);
      Dialog({ message: '加入书架成功！' });
      }
      else{
        Dialog({ message: '您已经加入过书架了！' });
      }
    }
  },
  components: {
    shujijiehsaoView,
    zuojiazhuyeView,
    rongyu,
    pinglun,
  },

};
</script>